<template>
    <div class="Box">
        <van-cell-group inset>
            <van-cell title="京东秒杀">
                <template #value>
                    <van-count-down :time="time" millisecond @finish="onfinish" ref="countDowns" auto-start>
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ parseInt((timeData.milliseconds)/10+'') }}</span>
                        </template>
                    </van-count-down>
                </template>
            </van-cell>
            <van-cell >
                <template #default>
                    <div class="msBox">
                        <div v-for="item,index in list" @click="onCliks(item)">
                            <img :src="item.img1" alt="">
                            <p>{{'￥' + (item.originprice*(item.discount/10)).toFixed(0) }}</p>
                        </div>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script setup lang='ts'>
import { ref ,onBeforeMount} from 'vue';
import {getMSData} from '../api/pro'
import type {
  CountDownInstance,
} from 'vant';
import { useRouter } from 'vue-router';
import { isTemplateNode } from '@vue/compiler-core';
const time = ref(30000)
const list = ref<listType[]>([]);
const count = ref(1)
const router = useRouter();
const countDowns = ref<CountDownInstance>();
const onfinish =async ()=>{
    if(list.value.length<4){
        count.value = 0;
    }else{
        count.value++
    }
    list.value = (await getMSData(count.value)).data;
    time.value = 30000;
    countDowns.value!.reset()
}

onBeforeMount(async()=>{
    list.value = (await getMSData(count.value)).data;
})

const onCliks = (i:listType)=>{
    router.push({name:"detail",params:{id:i.proid}})
}
</script>


<style scoped lang="scss">
.Box{
    margin-top: 10px;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
}

.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
}
.msBox{
    display: flex;
    justify-content: space-around;
    align-items: center;
    div{
        flex: 1;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;
        img{
            width: 100%;
            height: 70px;
        }
        p{
            color: red;
            font-size: 12px;
            text-align: center;
        }
    }
}
</style>